<template>
	<view>
		<navbar title="评价" />
		<view v-for="(item,index) in details.items" :key="item.id">
			<view class="product flex align-item_center">
				<image class="cover flex align-item_center justify-content_center" :src="item.picUrl" mode="aspectFit">
				</image>
				<view class="info">
					<view class="name">{{item.spuName}}</view>
					<view class="types border-box">{{item.properties.map(pro=>pro.valueName).join(" ")}}</view>
					<view class="points flex align-item_center justify-content_space-between">
						<view class="num">
							{{fen2yuan(item.payPrice)}}<text>积分</text>
						</view>
						<view class="count">x{{item.count}}</view>
					</view>
				</view>
			</view>
			<view class="input border-box v-details-card">
				<scroll-view scroll-y="true" style="height: 350rpx;">
					<up-textarea placeholder="请输入评价内容" border="border" autoHeight v-model="details.items[index].remark"
						maxlength="-1" placeholder-style="corlo:#666666,font-size: 24rpx,font-weight: 400" />
				</scroll-view>
			</view>
			<view class="main">
				<view class="title">请对本次服务进行评价：</view>
				<view class="star flex align-item_center">
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/7.png"
						v-for="ia in details.items[index].benefitScores" :key="ia" @click="setActive(ia,1,index)" />
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/8.png"
						v-for="ib in (a - details.items[index].benefitScores)" :key="ib" @click="setActive(ib,2,index)" />
				</view>
				<view class="ds">（1星:差评 2-3星:一般 4-5星:好评）</view>
			</view>
		</view>
		<u-gap height="260rpx"></u-gap>
		<view class="confirm fixed" @click="sumbit">提交</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	import navbar from "@/components/navbar.vue"
	import OrderApi from "@/sheep/api/trade/order.js"
	import {
		fen2yuan,
	} from '@/sheep/hooks/useGoods.js';
	import {
		msg
	} from "@/utils/tool.js"

	const a = ref(5);
	const setActive = (num, type, index) => {
		if (type === 1) details.items[index].benefitScores = num
		else details.items[index].benefitScores = details.items[index].benefitScores + num
	}

	const sumbit = () => {
		let num = 0;
		details.items.forEach(item => {
			const data = {
				orderItemId: item.id,
				anonymous: false,
				descriptionScores: 5,
				benefitScores: item.benefitScores,
				content: item.remark,
				picUrls: []
			}
			OrderApi.createOrderItemComment(data).then((res) => {
				if (res.code === 0) {
					num++
					if (num >= details.items.length) {
						msg("评价成功");
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}
			})
		})
	}

	// 订单详情
	const details = reactive({
		items: []
	})

	// 订单详情
	const orderGet = () => {
		OrderApi.getOrder(orderId.value).then(res => {
			details.items = res.data.items.map(item => {
				return {
					...item,
					remark: "",
					benefitScores: 5,
				}
			})
		})
	}

	const orderId = ref();
	onLoad((option) => {
		orderId.value = option.id
		orderGet()
	})
</script>


<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.product {
		margin-top: 20rpx;
		padding: 0 22rpx;

		.info {
			.points {
				margin-top: 14rpx;

				.count {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 1);
				}

				.num {
					font-size: 40rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 57.92rpx;
					color: rgba(167, 37, 48, 1);

					text {
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 57.92rpx;
						color: rgba(64, 3, 3, 1);
					}
				}
			}

			.types {
				margin-top: 16rpx;
				min-width: 322rpx;
				width: fit-content;
				height: 40rpx;
				line-height: 40rpx;
				padding: 0 28rpx;
				opacity: 1;
				border-radius: 100rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: rgba(166, 123, 123, 1);
				background: #EDE2CD;
			}

			.name {
				width: 472rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.cover {
			width: 160rpx;
			height: 160rpx;
			opacity: 1;
			border-radius: 8rpx;
			background: #FFFFFF;
			margin-right: 16rpx;

			image {
				width: 128rpx;
				height: 128rpx;
			}
		}
	}

	.confirm {
		left: 50%;
		transform: translateX(-50%);
		bottom: 110rpx;
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: #A72530;

		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		color: rgba(245, 245, 245, 1);
	}

	.main {
		padding: 0 22rpx;

		.ds {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(102, 102, 102, 1);
			margin-top: 20rpx;
		}

		.star {
			margin-top: 20rpx;

			image {
				width: 64.09rpx;
				height: 64rpx;
				margin-right: 40rpx;
			}
		}

		.title {
			margin-top: 60rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(0, 0, 0, 1);
		}
	}

	:deep(.u-textarea) {
		background-color: transparent !important;
		// height: 100% !important;
	}


	.input {
		padding: calc(36rpx - 18rpx) calc(42rpx - 18rpx);
		margin: 40rpx auto;
	}
</style>